@function pxTorem($px){
  @return $px / 75px * 1rem
}
body,html{
  width:10rem;

}
#app{
  width:100%;
  height:100%;
  //border:1px solid red;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  //登陆
  .login{
    width:10rem;
    height:pxTorem(100px);
    background: #FFFFFF;
    box-shadow: 0 pxTorem(10px) pxTorem(20px) 0 rgba(0,0,0,0.05);
    position: fixed;
    left:0;
    top:0;
    z-index: 20;
    .logintip{
      width:pxTorem(510px);
      height:100%;
      margin-left:pxTorem(30px);
      p:first-child{
        font-size: pxTorem(28px);
        color: #333333;
        letter-spacing: 0;
        margin-top:pxTorem(14px);
      }
      p:last-child{
        font-size: pxTorem(22px);
        color: #AAAAAA;
        letter-spacing: 0;
        span{
          color: #0DB95F;
        }
      }
    }
    .loginBtn{
      background: #0DB95F;
      border-radius: pxTorem(30px);
      width:pxTorem(180px);
      height:pxTorem(60px);
      margin-top:pxTorem(20px);
      font-size: pxTorem(26px);
      line-height:pxTorem(60px);
      text-align: center;
      color: #FFFFFF;
      letter-spacing: 0;
      margin-right:pxTorem(30px);
    }
  }
  //优惠券
  .coupon{
    width:pxTorem(460px);
    height:pxTorem(60px);
    position: fixed;
    left: 0;
    top:pxTorem(20px);
    z-index: 20;
    background: rgba(46,55,53,0.90);
    box-shadow: 0 pxTorem(4px) pxTorem(6px) 0 rgba(66,75,71,0.20);
    border-radius: 0 pxTorem(30px) pxTorem(30px) 0;
    p{
      width:pxTorem(364px);
      height:pxTorem(60px);
      line-height:pxTorem(60px);
      font-size: pxTorem(24px);
      color: #FFFFFF;
      letter-spacing: 0;
      margin-left:pxTorem(30px);
      span{
        color: #0DB95F;
      }
    }
    .line{
      width:pxTorem(2px);
      height:pxTorem(20px);
      background: rgba(255,255,255,0.10);
      margin-top:pxTorem(20px);
    }
    .close{
      width:pxTorem(60px);
      height:pxTorem(60px);
      -webkit-transform: rotate(-315deg);
      -moz-transform: rotate(-315deg);
      -ms-transform: rotate(-315deg);
      -o-transform: rotate(-315deg);
      transform: rotate(-315deg);
      border-radius: pxTorem(200px);
      color: #fff;
      line-height:pxTorem(56px);
      text-align: center;
      font-size:pxTorem(34px);
    }
  }
  //违章
  .illegal{
    width:10rem;
    height:pxTorem(100px);
    background: #FFFFFF;
    box-shadow: 0 pxTorem(10px) pxTorem(20px) 0 rgba(0,0,0,0.05);
    position: fixed;
    left: 0;
    top:0;
    z-index: 21;
    p{
      font-size: pxTorem(28px);
      color: #333333;
      letter-spacing: 0;
      width:pxTorem(510px);
      height:100%;
      line-height:pxTorem(100px);
      margin-left: pxTorem(30px);
      span{
        color: #0DB95F;
      }
    }
    .deal{
      background: #0DB95F;
      border-radius: pxTorem(30px);
      font-size: pxTorem(26px);
      width:pxTorem(180px);
      height:pxTorem(60px);
      line-height:pxTorem(60px);
      text-align: center;
      color: #FFFFFF;
      letter-spacing: 0;
      display: block;
      margin-top:pxTorem(20px);
      margin-right:pxTorem(30px);
    }
  }

}
